<template>
  <div class="product-list-outer"
       :class="(($props.showType===0 || $props.showType===1) || !$props.showType)?'product-list-item':'product-list-item1'"
       v-loading="loading">

    <template v-if="!$props.currProduct.name || $props.currProduct.name.length===0">
      <span style="color: darkred">╭(╯^╰)╮ 无商品信息...</span>
    </template>

    <template
      v-if="$props.showType===0 && $props.currProduct.name && $props.currProduct.name.length>0">
      <div class="line1">
        <div class="left">
          <img style="width: 90px; height: 90px; padding: 5px;"
               class="product-list-item-image"
               :src="$props.currProduct.image"
               :alt="$props.currProduct.name">
        </div>
        <div class="right" :style="{
          width:(this.getWinSize().width-124)+'px'
        }">
          <div class="product-list-item-title ovd_s" v-text="getProductName($props.currProduct.name)"></div>
          <div class="product-list-item-model ovd_s"
               :style="{
              maxWidth:modelMaxWidth
            }"
               v-if="!$props.currProduct.modelArr || $props.currProduct.modelArr.length===0">
            型号:
            <el-tag type="success" v-if="$props.currProduct.modelArr.length===1">
              单型号
            </el-tag>
            状态:
            <el-tag type="success" v-text="$props.currProduct.status.name"></el-tag>
          </div>
          <div class="product-list-item-model"
               v-if="$props.currProduct.modelArr && $props.currProduct.modelArr.length>0">
            默认型号:
            <el-tag class="ovd_s" type="success"
                     :style="{
              maxWidth:modelMaxWidth
            }"
                     v-if="$props.currProduct.modelArr && $props.currProduct.modelArr.length>0" v-text="$props.currProduct.shopProductStockModel"></el-tag>
            <br>
            状态:
            <el-tag type="info" v-text="$props.currProduct.status.name" v-if="$props.currProduct.status.id===0"></el-tag>
            <el-tag type="success" v-text="$props.currProduct.status.name" v-if="$props.currProduct.status.id===1"></el-tag>
          </div>
          <div class="product-list-item-price-box">
            <div class="product-list-item-price" v-text="'￥'+ToMoney($props.currProduct.price)"></div>
            <div class="c"></div>
          </div>
        </div>
        <div class="c"></div>
      </div>
      <div class="line2">
        <my-button :disabled="$props.currProduct.status.id===1" type="primary" :click="function (){del($props.currProduct.id)}" text="删除"></my-button>
        <my-button :disabled="$props.currProduct.status.id===1"  type="primary" :click="function (){edit()}" text="编辑"></my-button>
        <my-button :disabled="$props.currProduct.checkStatus.id===1"  type="primary" :click="function (){submitApply()}" :text="$props.currProduct.status.id===1?'申请下架':'申请上架'"></my-button>
        <!--        <button @click="addModel" v-if="$props.currProduct.modelArr && $props.currProduct.modelArr.length>0">增加型号</button>-->
        <my-button type="primary" :click="function (){modelList()}" text="查看型号"></my-button>
        <my-button type="primary" :click="function (){$router.push('ProductLogList?shopProductId='+$props.currProduct.id)}" text="商品日志"></my-button>
        <my-button type="primary" :click="function (){$router.push('ProductModelLogList?shopProductId='+$props.currProduct.id)}" text="库存日志"></my-button>
      </div>
    </template>



    <template
      v-if="$props.showType===1 && $props.currProduct.name && $props.currProduct.name.length>0">
      <div class="line1">
        <div class="left">
          <img style="width: 60px; height: 60px; padding: 5px;"
               class="product-list-item-image"
               :src="$props.currProduct.image"
               :alt="$props.currProduct.name">
        </div>
        <div class="right" :style="{
          width:(this.getWinSize().width-124)+'px'
        }">
          <div class="product-list-item-title ovd_s" v-text="getProductName($props.currProduct.name)"></div>
          <div class="product-list-item-model">
            型号:
            <el-tag class="ovd_s" :style="{
              maxWidth:modelMaxWidth
            }" type="success" v-text="$props.currProduct.model"></el-tag>

            <div>
              价格:
              <span class="b red" v-text="ToMoney($props.currProduct.price)"></span>
              *
              <span class="b red" v-text="$props.currProduct.nums"></span>
              =
              <span class="b red" v-text="'￥'+ToMoney(($props.currProduct.price*$props.currProduct.nums).toFixed(2)-0)"></span>
            </div>
          </div>
        </div>
        <div class="c"></div>
      </div>
    </template>
  </div>
</template>

<script>
import CartTools from '../tools/CartTools'
import MyButton from './MyButton'

export default {
  name: 'ProductListItem',
  components: {MyButton},
  props: {
    showType: Number,
    orderStatus: Number,
    currProduct: Object,
    changeCallBack: Function
  },
  data: function () {
    return {
      modelMaxWidth:(this.getWinSize().width-170)*0.9+'px',
      currWidth: '100%',
      loading: false,
      showAddSuccessTip: false
    }
  },
  beforeMount () {
    if (!(this.$props.showType === 4 || this.$props.showType === 2 || this.$props.showType === 1)) {
      this.currWidth = (this.getWinSize().width / 2) - 6
    }

    // console.log('currWidth',this.currWidth)
  },
  methods: {
    // 申请上下架
    submitApply: function () {
      let $this = this
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'Product/submitApply', {id: this.$props.currProduct.id}, function () {
          $this.loading = false
          $this.$message({
            type: 'success',
            message: '操作成功'
          })
          $this.$props.changeCallBack()
          $this.$forceUpdate()
        }, function (res) {
          $this.$message.error(res.message)
          $this.loading = false
        })
      })
    },
    modelList:function () {
      localStorage.setItem('CurrProduct', JSON.stringify(this.$props.currProduct))
      this.$router.push('ProductModelList?id='+this.$props.currProduct.id)
    },
    addModel:function () {
      let $this=this
      $this.bus.$emit('ProductAddModelDialogCallBus', {
        shopProductId:$this.$props.currProduct.id,
        shopProductName:$this.$props.currProduct.name,
        modelArr:$this.$props.currProduct.modelArr,
      },function () {
        $this.$props.changeCallBack()
      })
    },
    edit: function () {
      localStorage.setItem('CurrProduct', JSON.stringify(this.$props.currProduct))
      this.$router.push("ProductForm?id="+this.$props.currProduct.id)
    },
    del: function () {
      let $this = this
      $this.$confirm('您是否取要进行该操作?', '系统提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.loading = true
        $this.MyRequest($this.ApiDoNameShop + 'Product/delete', {
          id: $this.$props.currProduct.id,
        }, function (data) {
          $this.loading = false
          $this.$props.changeCallBack()
          $this.$forceUpdate()
        }, function (msg) {
          $this.loading = false
          $this.$message.error(msg)
        })
      }).catch(() => {

      })
    },
    getProductName: function (productName) {
      var winSize = this.getWinSize()
      var fontLength = Math.ceil(this.currWidth / 13) * 2 - 1
      if (productName.length > fontLength) {
        return productName.substring(0, fontLength) + '...'
      } else {
        return productName
      }
    },
  }
}
</script>

<style scoped>
.product-list-outer {
  min-height: 80px;
  width: 97%;
  margin: 3px auto;
  margin-bottom: 6px;
  float: left;
  background: #FFFFFF
}

.product-list-outer .line1 {
  min-height: 60px;
  width: 100%;
  float: left
}

.product-list-outer .line1 > .left {
  float: left
}

.product-list-outer .line1 > .right {
  float: left;
  line-height: 22px;
}

.product-list-outer > .line2 {
  height: 25px;
  line-height: 22px;
  width: 100%;
  float: left;
  text-align: right;
  padding-bottom: 5px;
}

.product-list-outer > .line2 > button {
  margin-right: 1px;
  padding: 4px 2px;
  margin-left: 1px;
}

.product-list-item-model{}
.product-list-item-model .el-tag.ovd_s{ position: relative; top: 3px;}
</style>
